<template>
  <van-popup
    :z-index="1002"
    :show="show"
    closeable
    position="bottom"
    :safe-area-inset-bottom="true"
    @close="() => (show = false)"
  >
    <view class="pay-wrap">
      <view class="row">
        <text v-if="countdownStr">{{ '支付剩余时间 ' + countdownStr }}</text>
      </view>
      <view class="row">
        <text class="fh">￥</text>
        <text class="txt1" v-if="orderInfo.total_price > 0">{{ getMoney }}</text>
        <text class="txt1" v-else>0.00</text>
      </view>
      <view class="row">
        <text>{{ orderInfo.remark }}</text>
      </view>
      <radio-group class="list-box">
        <view class="flex-rl list-item" v-for="item in payData" wx:for-index="i" :key="item.id">
          <view class="left">
            <view class="iconbox" style="{{'background-color:'+item.icon_color}}">
              <image src="../static/image/wechat.png"></image>
            </view>
          </view>
          <view class="b-b right">
            <view class="tit-box">
              <text class="tit">{{ item.name }}</text>
            </view>
            <radio checked="{{item.default==1}}" color="#ffc107" value="{{item.id}}"></radio>
          </view>
        </view>
      </radio-group>
      <button class="bg-main round cus-btn" @tap="submitPay" primary shape="circle">
        确认支付
      </button>
    </view>
  </van-popup>
</template>

<script setup lang="ts">
import { computed, reactive, toRefs } from 'vue'
import { getOrderInfo } from '@/pages/user/order/api'

const emit = defineEmits(['paySuccess', 'close'])

const state = reactive({
  show: false,
  orderInfo: {},
  paymentInfo: {},
  countdownStr: '00:00',
  timeOutTimer: null,
  payData: [
    {
      id: 'wxpay',
      name: '微信支付',
      icon: 'weixin-fill',
      icon_color: '#09bb07',
      default: 1,
    },
  ],
})

const getMoney = computed(() => {
  return state.orderInfo.total_price > 0 ? (state.orderInfo.total_price / 100).toFixed(2) : null
})

const { show, countdownStr, payData, orderInfo } = toRefs(state)

const getOrder = (id) => {
  getOrderInfo({
    id,
  })
    .then((res) => {
      state.show = true
      state.orderInfo = res.data
      state.paymentInfo = res.data.payment
      startCountdown()
    })
    .catch((e) => {
      if (e.code !== 10000) {
        emit('close')
        return uni.showToast({
          title: e.msg,
          icon: 'none',
        })
      }
    })
}

const startCountdown = () => {
  let totalSeconds = 600 // 10 minutes in seconds
  const interval = setInterval(() => {
    if (totalSeconds <= 0) {
      clearInterval(interval)
    } else {
      const minutes = Math.floor(totalSeconds / 60)
      const seconds = totalSeconds % 60
      state.countdownStr = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
      totalSeconds--
    }
  }, 1000)
}

const submitPay = () => {
  uni.showLoading({
    title: '支付中...',
  })
  console.log(state.paymentInfo, ' state.paymentInfo')
  uni.requestPayment({
    provider: 'wxpay',
    orderInfo: state.paymentInfo,
    ...state.paymentInfo,
    success: function (res) {
      uni.hideLoading()
      uni.showToast({
        title: '支付成功',
        icon: 'none',
      })
      state.show = false
      emit('paySuccess')
    },
    fail: function (err) {
      uni.hideLoading()
      uni.showToast({
        title: '支付失败',
        icon: 'none',
      })
    },
  })
}
const open = (id) => {
  getOrder(id)
}

defineExpose({
  open,
})
</script>

<style lang="scss" scoped>
.pay-wrap {
  flex-direction: column;
  padding: 30px 15px;
}

.pay-wrap .row,
.pay-wrap {
  display: flex;
  justify-content: center;
}

.pay-wrap .row {
  align-items: flex-end;
  color: #888;
  flex-direction: row;
  font-size: 12px;
  margin-bottom: 16rpx;
}

.pay-wrap .row .fh {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12rpx;
  margin-right: 12rpx;
}

.pay-wrap .row .txt1 {
  color: #000;
  font-size: 34px;
  font-weight: 700;
}

.pay-wrap .row [class*='hxicon-'] {
  margin-left: 3px;
  position: relative;
  top: 3px;
}

.pay-wrap .pricebox {
  align-items: baseline;
  display: flex;
  flex-direction: row;
}

.list-box {
  display: flex;
  flex-direction: column;
  margin: 32rpx 0 64rpx;
}

.list-box .list-item {
  height: 50px;
}

.list-box .list-item .left .iconbox,
.list-box .list-item .left,
.list-box .list-item {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.list-box .list-item .left .iconbox {
  border-radius: 4px;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.list-box .list-item .left .iconbox [class*='hxicon-'] {
  color: #fff;
  font-size: 22px;
}

.list-box .list-item .right {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: row;
  height: 100%;
}

.list-box .list-item .right .tit-box {
  flex: 1;
}

.list-box .list-item .right .tit-box .tit {
  color: #333;
  font-size: 16px;
  margin-left: 6px;
}

.cus-btn {
  width: 100%;
}
</style>
